<template>
  <div class="home">
    <van-nav-bar left-arrow>
      <template #left>
        <div class="left-title">
          <div class="logo">
            <img src="../assets/images/logo.jpg" alt="">
          </div>
          <div class="logo-title">Nene Coffee</div>
        </div>
      </template>
    </van-nav-bar>
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, i) in bannerData" :key="i">
          <img @click="goDetails(item.pid)" class="img-auto" :src="item.bannerImg" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="main">
      <div class="main-box">
        <!-- 推荐商品 -->
        <div class="recommend">
          <div class="rmd-title">
            <div class="title-text">为你推荐</div>
          </div>
          <div style="overflow: hidden; overflow-x: auto">
            <ul class="recommend-list">
              <li v-for="item in hotData" :key="item.id" @click="goDetails(item.pid)">
                <div class="recommend-img">
                  <img class="img-auto" :src="item.largeImg" alt="" />
                </div>
                <p>&yen; {{ item.price }}</p>
                <span></span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 热门商品 -->
        <div class="hot">
          <div class="hot-title">
            <div class="title-text">Hot</div>
          </div>
          <ul class="hot-list">
            <Product v-for="item in hotData" :key="item.id" :item="item" />
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../assets/less/home.less";
import Product from '../components/Product.vue';
export default {
  name: "Home",
  components: {
    Product
  },
  data() {
    return {
      bannerData: [],
      hotData: [],
    };
  },
  created() {
    this.getBanner();
    this.getHotData();
  },
  methods: {
    // 获取banner商品
    getBanner() {
      this.axios({
        method: "GET",
        url: this.baseURL + "/banner",
        params: {
          appkey: this.appkey,
        },
      })
        .then((response) => {
          // console.log(response.data);
          if (response.data.code == 300) {
            this.bannerData = response.data.result;
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },

    // 获取热门商品
    getHotData() {
      this.axios({
        method: "GET",
        url: this.baseURL + "/typeProducts",
        params: {
          appkey: this.appkey,
          key: "isHot",
          value: 1,
        },
      })
      .then((response) => {
        // console.log(response);
        if (response.data.code == 500) {
          this.hotData = response.data.result;
        }
      })
      .catch((err) => {
        console.error(err);
      });
    },

    // 跳转详情页
    goDetails(pid) {
      this.$router.push({name: 'Details', params: {pid}});
    },
  },
};
</script>
